<template>
  <div class="">
    <div class="breadcrumb">
      <router-link :to="{name: 'memberCenter'}" class="bread_a">个人中心</router-link> <i class="el-icon-arrow-right"></i>
      会员特权
    </div>
    <div class="member_grade_box">
      <div class="avatar_box">
          <img :src="uploadImg" width="130" height="130"/>
        </div>
        <div class="person_info">
          <span class="name">{{username}}</span>&nbsp;<span class="title">等级 <em class="grade">V{{levelInfo.level ? levelInfo.level : 'IP'}}</em></span>
          <p class="current">当前采购额：¥{{levelInfo.amount | floatPrices}}</p>
          <p class="next" v-show="levelInfo.nextLevelAmount">距离下一级还需：¥{{(levelInfo.nextLevelAmount - levelInfo.amount) | floatPrices}}</p>
        </div>
    </div>
    <div class="line" v-if="hasNextLevel"></div>
    <!-- 等级优惠券 -->
    <div class="member_grade_coupon" v-if="hasNextLevel">
      <p class="title">下一等级专享特权 <span class="explain">（升级后即可领取）</span></p>
      <privilege :levelInfoObj="nextLevelObj" />
    </div>
    <div class="line" v-if="couponList.length > 0"></div>
    <div class="member_grade_coupon" v-if="couponList.length > 0">
      <p class="title">下一等级优惠券 <span class="explain">（升级后即可领取）</span></p>
      <ul class="discount_group">
        <li class="discount_item" v-for="(item, index) in couponList" :key="index">
          <div class="discount_money">
            <h1 class="sum">{{item.amount}}<span class="unit">元</span></h1>
            <p class="condition">{{item.limitAmount > 0 ? `满${item.limitAmount}可使用` : '0元起用'}}</p>
            <p class="dashed"></p>
          </div>
          <div class="explains">
            <p>·升级至LV{{levelInfo.level + 1 - 0}}可领</p>
            <p>·有效期:领取后生效</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="line"></div>
    <div class="ad_box_block">
      <div class="qrcode">
        <img src="../../../images/qrcode.jpg" height="126" width="126" />
      </div>
      <h2 class="text_big">扫码关注微信公众号</h2>
      <p class="text_small">百万优惠 无限礼包 随意拿</p>
    </div>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
  import {prefixImg} from '@/tool/index'
  import {privilege} from '@/components/index'
  import {getNextLevelRight} from '@/service/get-data'
  export default {
    components: {
      privilege
    },
    data () {
      return {
        defaultUrl: require('../../../images/person_logo.png'),
        hasNextLevel: true, // 是否含有下一等级
        nextLevelObj: {}
      }
    },
    computed: {
      ...mapState({
        username: state => state.user.username,
        exam: state => state.user.isExam,
        headImg: state => state.user.headImg,
        levelInfo: state => state.levelInfoObj
      }),
      uploadImg () {
        return this.headImg ? prefixImg + this.headImg : this.defaultUrl
      },
      couponList () {
        let fereight = this.nextLevelObj.freightDeductions ? this.nextLevelObj.freightDeductions : []
        let deductible = this.nextLevelObj.deductibleDeductions ? this.nextLevelObj.deductibleDeductions : []
        return fereight.concat(deductible)
      }
    },
    methods: {
      ...mapActions(['getUserLevelInfo']),
      async fetchNextLevelRight () {
        let res = await getNextLevelRight()
        if (res.data.resultCode && res.data.resultCode === 2000) {
          if (!res.data.data) {
            this.hasNextLevel = false
            return
          }
          this.hasNextLevel = true
          this.nextLevelObj = res.data.data
        }
      }
    },
    mounted () {
      let hasAmount = 'amount' in this.levelInfo
      if (!hasAmount) {
        this.getUserLevelInfo()
      }
      this.fetchNextLevelRight()
    }
  }
</script>

<style lang="scss" scoped>
  .icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .member_grade_box{
    position: relative;
    overflow: hidden;
    margin-top: 38px;
    margin-bottom: 40px;
    .avatar_box{
      position: relative;
      float: left;
      width: 115px;
      height: 120px;
      border-radius: 100%;
      overflow: hidden;
      // vertical-align: middle;
      // border: 1px solid #DCDCDC;
      // padding: 2px;
      img{
        width: 109px;
        height: 109px;
        position: absolute;
        border: 1px solid #DCDCDC;
        padding: 3px;
        border-radius: 50%;
      }
    }
    .person_info{
      display: inline-block;
      margin-left: 35px;
      line-height: 30px;
      color: #333333;
      margin-top: 20px;
      .name{
        @include fontbase(#333, 20px, 28px)
      }
      .title{
        @include fontbase(#333, 14px, 22px)
      }
      .grade{
        @include fontbase(#333, 18px, 22px)
      }
      .current{
        @include fontbase(#333, 16px, 30px)
      }
      .next{
        @include fontbase(#666, 16px, 25px)
      }
    }
  }
  .member_grade_coupon{
    position: relative;
    margin: 40px 0 20px;
    .title{
      @include fontbase(#333, 18px, 25px)
    }
    .explain{
      @include fontbase(#999999, 18px, 25px)
    }
  }
  .discount{
    &_group{
      overflow: hidden;
      margin-top: 40px;
      margin-bottom: 20px;
    }
    &_money{
      background: linear-gradient(180deg, #FFBC00, #FF8600);
      padding: 5px 0 3px;
      text-align: center;
      .sum{
        @include fontbase(#fff, 40px, 50px);
      }
      .unit{
        @include fontbase(#fff, 18px, 25px);
      }
      .condition{
        @include fontbase(#fff, 12px, 17px);
        margin-bottom: 10px;
      }
      .dashed{
        border-bottom: 1px dashed #ffffff;
      }
    }
    &_item{
      margin-right: 20px;
      float: left;
      width: 31%;
      margin-bottom: 20px;
      &:last-child{
        margin-right: 0;
      }
      .explains{
        padding: 11px;
        border:1px solid #d8d8d8;
        border-top: none;
        @include fontbase(#666666, 12px, 17px);
      }
    }
    
  }
</style>
